<template>
	<view :class="['v-badge', { 'v-badge--dot': dot }, `v-badge--size-${size}`, `v-badge--position-${position}`]" :style="badgeStyle">
		<slot></slot>
		<view v-if="!dot && (isShowContent)" class="v-badge-content">
			{{ displayContent }}
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed,inject } from 'vue';

/**
 * v-badge 标徽
 * value    双向绑定值
 * dot        省略显示
 * max        最大值
 * color    标徽颜色
 * size		标徽大小		默认值:medium   可选值small小、medium中、large大
 * position	标徽位置		默认值:right		可选值left左、right右
 */
const props = defineProps({
	value: {
		type: [Number, String],
		default: 0
	},
	dot: {
		type: Boolean,
		default: false
	},
	max: {
		type: Number,
		default: 99
	},
	color: {
		type: String,
		default: '#ff5357'
	},
	fontColor: {
		type: String,
		default: '#fff'
	},
	size: {
		type: String,
		default: 'medium',
		validator: (value: string) => {
			return ['small', 'medium', 'large'].includes(value);
		}
	},
	position: {
		type: String,
		default: 'right',
		validator: (value: string) => {
			return ['left', 'right'].includes(value);
		}
	}
});


const config = inject<any>('config');
const displayContent = computed(() => {
	if (props.dot) return '';
	if (props.max && props.value > props.max) {
		return `${props.max}+`;
	}
	return props.value;
});

const isShowContent = computed(() => {
	if (props.dot) return false;
	if (typeof props.value === 'string') return props.value.length > 0;
	return props.value > 0;
});

const badgeStyle = computed(() => {
	return {
		'--badge-color': props.color
	};
});
</script>

<style lang="scss" scoped>
.v-badge {
	position: relative;
	display: inline-flex;
	align-items: center;

	.v-badge-content {
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		background-color: var(--badge-color, #ff4500);
		color: v-bind('fontColor');
		border-radius: v-bind("config.borderRadius.circle");
		padding: 0 8rpx;
		font-size: v-bind("config.fontSize.hintText");
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		min-width: 26rpx;
		transform: scale(0.8);
	}

	&--dot::after {
		content: '';
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		width: 16rpx;
		height: 16rpx;
		background-color: var(--badge-color, #ff4500);
		border-radius: 50%;
	}

	&--size-small .v-badge-content {
		font-size: v-bind("config.fontSize.smallText");
		height: 22rpx;
		line-height: 22rpx;
		min-width: 22rpx;
		padding: 6rpx 12rpx;
		transform: scale(0.7);
	}

	&--size-large .v-badge-content {
		font-size: v-bind("config.fontSize.largeText");
		height: 25rpx;
		line-height: 25rpx;
		min-width: 25px;
		padding: 3rpx 8rpx;
		transform: scale(0.9);
	}

	&--position-left .v-badge-content {
		left: -12rpx;
		right: auto;
	}

	&--position-left::after {
		left: -12rpx;
		right: auto;
	}
}
</style>